<template>
  <div class="list1">
   <headerNav v-if="host_hidden">
         <div class="return" @click="returnBack"></div>
         <div class="list">{{headerNav_title}}</div>
   </headerNav>
   <ul>
     <li @click="pull">
       <div class="list_header">
         <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>
         <div>如何更改手机号码dsadsadsa</div>
         <div :class="{'pull_tag':true,'shang':content_show ,'xia':!content_show}"></div>
       </div>
       <div class="list_content" v-if="content_show">adsdadsa</div>
     </li>
     <li @click="pull">
       <div class="list_header">
         <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>
         <div>如何更改手机号码</div>
         <div :class="{'pull_tag':true,'shang':content_show ,'xia':!content_show}"></div>
       </div>
       <div class="list_content" v-if="content_show">adsdadsa</div>
     </li>
   </ul>
  </div>
</template>

<script>
import headerNav from '@/components/header_nav'
export default {
  name: 'list',
  components:{
    headerNav
  },
  data () {
    return {
      content_show:false,
      host_hidden:true,
      headerNav_title:""
    }
  },
  methods:{
    pull(){
      this.content_show = !this.content_show
    },
    returnBack(){
      this.$router.go(-1)
    }
  },
  mounted(){
    if(this.$route.query.type=='borrow'){
      console.log('borrow')
      this.headerNav_title='借款问题'
    }else if(this.$route.query.type=='still'){
      console.log('still')
      this.headerNav_title='还款问题'
    }else if(this.$route.query.type=='authentication'){
      console.log('authentication')
      this.headerNav_title='认证提额'
    }else if(this.$route.query.type=='other'){
      console.log('other')
      this.headerNav_title='其他问题'
    }else{
      console.log('host')
      this.host_hidden=false;
    }
  }
}
</script>
<style scoped>
.list1 ul{width: 100%;}
.list1 div.list{width: 100%;height: 100%;line-height: 50px;text-align: center;font-size: 18px;color: #fff;background-image: linear-gradient(-180deg,#3583f1,#1862E2);border-bottom: 1px solid #3583f1;}
.list1 ul li{width: 100%;}
.list_header{width: 100%;height: 51px;display: flex;justify-content: row;position: relative;}
.list_header img{width: 20px;height: 20px;margin-left: 10px;margin-top: 15px;}
.list_header div:nth-of-type(1){height: 51px;line-height: 51px;margin-left: 7px;font-size: 18px;
    color: #4a4a4a;}
.list_content{margin: 0 10px;color: #4a4a4a;background-color: #dedcdc;padding: 8px;font-size: 18px;line-height: 24px;}
.pull_tag{content: " ";display: inline-block;height: 12px;width: 12px;border-color: #9b9b9b;border-style: solid;top: 15px;position: absolute;right: 20px;-webkit-transform: matrix(.71,.71,-.71,.71,0,0);-ms-transform: matrix(.71,.71,-.71,.71,0,0);transform: matrix(.71,.71,-.71,.71,0,0);}

.xia{border-width: 0px 2px 2px 0px;}
.shang{border-width: 2px 0px 0px 2px;}
</style>
